<template>
	<view class="card-detail">
		<view class="top">
			<card-pack-item :data="data" showQrcode />
			<view style="margin-top: 40rpx;font-weight: 700;font-size: 30rpx;">
				手续费
			</view>
			<view class="" style="width: 100%;height: 100rpx;background-color: #fff;margin-top: 30rpx;">
				<view class=""
					style="width: 60%;height: 48rpx;float: left;font-size: 40rpx;line-height: 100rpx;margin-left: 20rpx;font-weight: 600;">
					{{data.production}}
				</view>
				<view class="" style="width: 10%;height: 50rpx;float: right;line-height: 100rpx;">
					元
				</view>
			</view>
			<view style="margin-top: 40rpx;font-weight: 700;font-size: 30rpx;">
				理由
			</view>
			<div class="vueContant">
				<div class="vueDetail">
					<u-tag v-for="(item2,index2) in data_specs" :key="index2" :text="item2.name" type="warning"
						:bgColor="
					    data_name.indexOf(item2) > -1
					      ? '#2F75FA'
					      : '#EFEFEF'
					  " :borderColor="
					    data_name.indexOf(item2) > -1 ? '#2F75FA' : 'rgba(0,0,0,0)'
					  " :color="data_name.indexOf(item2) > -1 ? '#ffffff' : '#333'" @click="data_specss(item2,index2)" size="large" />
				</div>
			</div>
			<view style="width: 100%; height: auto;background: #fff; padding: 20rpx 30rpx; font-size: ;
			margin-top: 30rpx;
			background-color: white;
			border-radius: 7px;">
				<view style="width: 100%;height: 40rpx;font-size: 26rpx;
								font-weight: 500;
								color: #333333;">备注</view>
				<textarea placeholder=" " class="input-textare" height="200rpx" margin-top='20rpx'
					placeholder-style="font-size: 26rpx" v-model="order_remarks" />
			</view>
			<view class="" style="width: 92%;height: 100rpx;position: absolute;bottom: 10rpx;">
				<button style="background-color: #2F75FA; color: #fff;border-radius: 50rpx 50rpx;" @click="lost"
					type="default">确认挂失</button>
			</view>
		</view>


	</view>
</template>

<script>
	import cardPackItem from '@/pages/personal/card-pack/card-pack-item.vue'
	const index = require('@/api/personal/index.js')
	const venues = require("@/api/venues/venues.js");
	export default {
		components: {
			cardPackItem
		},
		data() {
			return {
				data: {},
				cardno: '',
				id: 0,
				data_specs: [{
						checked: true,
						name: "丢失",
						ticket_id: "77",
					},
					{
						checked: false,
						name: "被盗",
						ticket_id: "77",
					},
					{
						checked: false,
						name: "其他",
						ticket_id: "77",
					}
				],
				data_name: [],
				title: '标题',
				titles: '是否将此卡解除挂失',
				content: '',
				order_remarks: "",
				payWaitTime:'00:15:00',
				resultlist:{},
				card_id:''
			}
		},
		onLoad(options) {
			this.cardno = options.cardno
			this.card_id = options.card_id
			this.getMyCardDetail()
		},
		methods: {
			data_specss(item2, index2) {
				console.log(item2, index2)
				this.title = item2.name
				this.content = item2.name
				this.chooseStock = 0
				this.data_name = []
				this.namedata = item2.name
				this.ticket_id = item2.ticket_id
				let data_name = []
				this.data_specs.forEach(item => {
					data_name.push(item)
				})
				data_name.some((item, index) => {
					if (item == item2) {
						this.data_name[index] = item2;
						this.$forceUpdate();
					}
				});

				this.data_specs.map((item, index) => {
					item.checked = index === index2 ? true : false
				})

			},
			card_recipientlist() {
				console.log(11122)
				uni.navigateTo({
					url: './card_recipient'
				})
			},
			gocard(index) {
				this.selectcard = index
			},

			// 获取我的卡包详情
			async getMyCardDetail() {
				let params = {
					cardno: this.cardno,
					project_id: getApp().globalData.projectId,
					user_id: uni.getStorageSync('phone'),
					open_id: uni.getStorageSync("openid"),
					appid: this.$https.weixinAppId,
					id:this.card_id
				}
				let res = await index.getMyCardDetail(params)
				if (res.code === 1) {
					this.data = res.data.cardData
				}
			},

			// 获取我的卡包详情
			async lost() {
				let that = this
				if (that.content == '') {
					uni.showToast({
						title: '请输入备注',
						icon: 'none'
					})
					return
				}
				if (that.order_remarks == '') {
					uni.showToast({
						title: '请输入理由',
						icon: 'none'
					})
					return
				}
				let params = {
					app_id: that.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					id: that.data.id,
					venue_id: that.data.venue_id,
					price: that.data.production, //价格
					pay_method: 1, //支付方式
					order_money: that.data.production, //应付
					reason: that.content, //理由
					remark: that.order_remarks, //备注
				}
				console.log(params,'222')
				let res = await index.lost(params)
					console.log(res.data, '123')
					console.log(res.code,'[[[]]]')
					that.resultlist = res.data.result
					if (res.code == 1) {
						if (res.data.result.info.order_money >= '0.01') {
							uni.navigateTo({
								url: "/page_venues/pages/venuesDetail/pay/pay?amount=" +
									res.data.result.info.order_money +
									"&payWaitTime=" +
									that.payWaitTime +
									"&venue_id=" +
									res.data.result.info.venue_id +
									"&order_id=" +
									res.data.result.info.order_id +
									"&orderid=" +
									res.data.result.info.orderid +
									"&order_type=" +
									res.data.result.info.ordertype +
									"&chaoshitype=" + 2 +
											"&goods_id=" +
											that.datalist.card_id,
							});
					
						} else {
							that.moniPay()
						}
					
					} else {
						if (res.info == '你尚有未付款卡，请先支付') {
							uni.showModal({
								title: res.info,
								// 提示文字
								// content: '是否取消订单？',
								// 取消按钮的文字自定义
								cancelText: "取消",
								// 确认按钮的文字自定义
								confirmText: "我知道了",
								//删除字体的颜色 
								confirmColor: '#000000',
								//取消字体的颜色
								cancelColor: '#999',
								success: function(res) {
									if (res.confirm) {
										// 执行确认后的操作
										uni.navigateTo({
											url: '/pages/personal/orders/orders?tab=1',
										});
									}
								}
							})
						} else if (res.info == '你尚有未付款门票，请先支付') {
							uni.showModal({
								title: res.info,
								// 提示文字
								// content: '是否取消订单？',
								// 取消按钮的文字自定义
								cancelText: "取消",
								// 确认按钮的文字自定义
								confirmText: "我知道了",
								//删除字体的颜色 
								confirmColor: '#000000',
								//取消字体的颜色
								cancelColor: '#999',
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/personal/orders/orders?tab=1',
										});
									}
								}
							})
						} else {
							uni.showModal({
								title: res.info,
								// 提示文字
								// content: '是否取消订单？',
								// 取消按钮的文字自定义
								cancelText: "取消",
								// 确认按钮的文字自定义
								confirmText: "我知道了",
								//删除字体的颜色 
								confirmColor: '#000000',
								//取消字体的颜色
								cancelColor: '#999',
								success: function(res) {
					
								}
							})
						}
					}
				// uni.request({
				// 	url: 'http://192.168.1.164/sass-test/public/index.php/api/EditCard/lost',
				// 	method: 'POST',
				// 	data: {
				// 		app_id: that.$https.weixinAppId,
				// 		project_id: getApp().globalData.projectId,
				// 		id: that.data.id,
				// 		venue_id: that.data.venue_id,
				// 		price: that.data.production, //价格
				// 		pay_method: 1, //支付方式
				// 		order_money: that.data.production, //应付
				// 		reason: that.content, //理由
				// 		remark: that.order_remarks, //备注
				// 	},
				// 	header: {
				// 		'content-type': 'application/json', //自定义请求头信息
				// 	},
				// 	success: res => {
						
				// 	}
				// });
			},
			// order_type 21挂失   22补卡  23  延期
			async moniPay() {
				var nowdate = new Date().valueOf();
				var that = this;
				let params = {
					app_id: that.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					id: that.data.id,
					venue_id: that.data.venue_id,
					price: that.data.production, //价格
					pay_method: 1, //支付方式
					order_money: that.data.production, //应付
					reason: that.content, //理由
					remark: that.order_remarks, //备注
					add_time: nowdate,
					out_trade_no: that.resultlist.info.order_id,
					transaction_id: 'ZF001',
					goods_id: '1',
					order_type:'21'
				};
				let res = await venues.moniPay(params);
				if (res.code == 1) {
					uni.navigateTo({
						url: '/pages/personal/personal?backUp=1'
					})
			
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import url("@/static/css/personal/index.css");

	.card-detail {
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #eeeeee;
		height: 100vh;

		.top {
			padding: 30rpx;

			// .vueContant {
			// 	position: fixed;
			// 	top: 40%;
			// 	left: 52.5%;
			// 	width: 600rpx;
			// 	height: 600rpx;
			// 	margin-left: -320rpx;
			// 	margin-top: -76px;
			// 	background-color: white;
			// 	z-index: 1002;
			// 	overflow: auto;
			// 	border-radius: 20rpx;
			// }

			.vueDetail {
				font-size: 28rpx;
				color: #646566;
				display: flex;
				// justify-content: center;
				padding: 32rpx;
				height: 100rpx;
				margin-right: 20rpx;
			}

			/deep/.u-tag {
				margin-left: 20rpx;

			}

			/deep/.u-textarea {
				background-color: #f3f3f3;
				margin-top: 80rpx;
			}

			/deep/.u-button {
				width: 40%;
				height: 80rpx;
			}

		}
	}
</style>